<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet/less" href="./css/common.less">
    <link rel="stylesheet/less" href="./css/index.less">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <title>外卖</title>
</head>

<body>
    <header>
        <div class="head">
            <div class="left">
                <img src="./images/home/定位icon.png" alt="">
                <p class="address">三里屯大街啊啊啊啊啊</p>
            </div>
            <div class="right">
                <img src="./images/home/search.png" alt="">
                <input type="text" placeholder="快餐">
            </div>
        </div>
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./images/home/banner.png" alt=""></div>
                <div class="swiper-slide"><img src="./images/home/banner.png" alt=""></div>
                <div class="swiper-slide"><img src="./images/home/banner.png" alt=""></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    </header>
    <img class="header_bg" src="./images/home/header_bg.png" alt="">
    <section>
        <div class="classify">
            <div class="item">
                <img src="./images/home/fun_icon1.png" alt="">
                <span>附近快餐</span>
            </div>
            <div class="item">
                <img src="./images/home/fun_icon2.png" alt="">
                <span>美味甜点</span>
            </div>
            <div class="item">
                <img src="./images/home/fun_icon3.png" alt="">
                <span>早餐预定</span>
            </div>
            <div class="item">
                <img src="./images/home/fun_icon4.png" alt="">
                <span>新鲜水果</span>
            </div>
        </div>
        <div class="board">
            <div class="text">
                升级
                <span>“超级会员”更多优惠</span>
            </div>
            <img src="./images/home/GO.png" alt="">
        </div>
    </section>
    <main>
        <div class="head">
            <div class="left">推荐商家</div>
            <div class="right">更多 &gt;</div>
        </div>
        <div class="content">
            <div class="item">
                <div class="left"><img src="./images/home/dish1.png" alt=""></div>
                <div class="right">
                    <span class="name">马路边边</span>
                    <div class="sales">
                        <div class="star"><img src="./images/home/star.png" alt="">4.9</div>
                        <div class="num">月售1990</div>
                    </div>
                    <div class="least_distance">
                        <div class="least">起送￥60</div>
                        <div class="distance">
                            25分钟&nbsp;&nbsp;&nbsp;1.5km
                        </div>
                    </div>
                    <div class="discounts">满60减10</div>
                </div>
            </div>
            <div class="item">
                <div class="left"><img src="./images/home/dish2.png" alt=""></div>
                <div class="right">
                    <span class="name">外婆请你吃饭啦</span>
                    <div class="sales">
                        <div class="star"><img src="./images/home/star.png" alt="">4.9</div>
                        <div class="num">月售1990</div>
                    </div>
                    <div class="least_distance">
                        <div class="least">起送￥60</div>
                        <div class="distance">
                            25分钟&nbsp;&nbsp;&nbsp;1.5km
                        </div>
                    </div>
                    <div class="discounts">满60减10</div>
                </div>
            </div>
            <div class="item">
                <div class="left"><img src="./images/home/dish3.png" alt=""></div>
                <div class="right">
                    <span class="name">豚豚屋</span>
                    <div class="sales">
                        <div class="star"><img src="./images/home/star.png" alt="">4.9</div>
                        <div class="num">月售1990</div>
                    </div>
                    <div class="least_distance">
                        <div class="least">起送￥60</div>
                        <div class="distance">
                            25分钟&nbsp;&nbsp;&nbsp;1.5km
                        </div>
                    </div>
                    <div class="discounts">满60减10</div>
                </div>
            </div>
            <div class="item">
                <div class="left"><img src="./images/home/dish1.png" alt=""></div>
                <div class="right">
                    <span class="name">马路边边</span>
                    <div class="sales">
                        <div class="star"><img src="./images/home/star.png" alt="">4.9</div>
                        <div class="num">月售1990</div>
                    </div>
                    <div class="least_distance">
                        <div class="least">起送￥60</div>
                        <div class="distance">
                            25分钟&nbsp;&nbsp;&nbsp;1.5km
                        </div>
                    </div>
                    <div class="discounts">满60减10</div>
                </div>
            </div>
            <div class="item">
                <div class="left"><img src="./images/home/dish2.png" alt=""></div>
                <div class="right">
                    <span class="name">外婆请你吃饭啦</span>
                    <div class="sales">
                        <div class="star"><img src="./images/home/star.png" alt="">4.9</div>
                        <div class="num">月售1990</div>
                    </div>
                    <div class="least_distance">
                        <div class="least">起送￥60</div>
                        <div class="distance">
                            25分钟&nbsp;&nbsp;&nbsp;1.5km
                        </div>
                    </div>
                    <div class="discounts">满60减10</div>
                </div>
            </div>
            <div class="item">
                <div class="left"><img src="./images/home/dish3.png" alt=""></div>
                <div class="right">
                    <span class="name">豚豚屋</span>
                    <div class="sales">
                        <div class="star"><img src="./images/home/star.png" alt="">4.9</div>
                        <div class="num">月售1990</div>
                    </div>
                    <div class="least_distance">
                        <div class="least">起送￥60</div>
                        <div class="distance">
                            25分钟&nbsp;&nbsp;&nbsp;1.5km
                        </div>
                    </div>
                    <div class="discounts">满60减10</div>
                </div>
            </div>
        </div>
    </main>
    <footer>
        <a href="./index.html" class="item">
            <img src="./images/_footer_icon1.png" alt="">
            <span>外卖</span>
        </a>
        <a href="./order.html" class="item">
            <img src="./images/footer_icon2.png" alt="">
            <span>订单</span>
        </a>
        <a href="./my.html" class="item">
            <img src="./images/footer_icon3.png" alt="">
            <span>我的</span>
        </a>
    </footer>

    <script src="./js/less-4.1.3.js"></script>
    <script src="./js/swiper-bundle.min.js"></script>
    <script src="./js/rem.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper', {
            loop: true, // 循环模式选项
            observer: true, // 开启动态检查器
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
            autoplay: {
                // 鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换
                pauseOnMouseEnter: true,
                // 用户操作swiper之后，是否禁止autoplay
                disableOnInteraction: false,
            },
            on: {
                // 回调函数 开启状态并监测到元素发生改变
                observerUpdate: function (swiper) {
                    // 判断当前轮播是否处于非自动切换，如果处于非自动就进入里面的逻辑
                    if (!swiper.autoplay.running) {
                        // 获取调试信息
                        console.log('自动轮播失效')

                        // 开启自动切换
                        swiper.autoplay.start()

                        // 获取调试信息
                        console.log('已开启自动切换')
                    }
                },
            }
        })        
    </script>
</body>

</html>